<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/modules/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>乐活社区</title>
		<%@ include file="/WEB-INF/views/modules/include/meta.jsp"%>
		<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    	<link rel="stylesheet" href="${ctxStatic}/modules/accordion-menu/css/style.css" media="screen" type="text/css" />
	<script type="text/javascript">
		var clientCookie = new MallCookieService();
		var sid="${merchant.id}";
		var classifyId = "${classifyId}";
		var choiceClassifyId = "${choiceClassifyId}";
		var products = new Array();
		
		$(document).ready(function() {
			var cid= "";
			if(clientCookie.getClassifyId()==classifyId && clientCookie.getChoiceClassifyId()!=null && clientCookie.getChoiceClassifyId()!="" && clientCookie.getChoiceClassifyId()==choiceClassifyId){
				cid = clientCookie.getChoiceClassifyId();
			}else{
				cid=choiceClassifyId;
			}
			//初始化cookie内容
			clientCookie.setSID(sid);
			clientCookie.setClassifyId(classifyId);
			clientCookie.setChoiceClassifyId(choiceClassifyId);
			
			mall_showClassifyProducts(cid);
			
			/*初始化内容所有商品*/
			if(${fn:length(list)}>0){  //加载进来时封装商品信息
				products = new Array();
				<c:forEach items="${list}" var="product" varStatus="ps">
					var item = new Product();
					item.setId("${product.id}");
					item.setPrice("${product.price}");
					item.setStartSaleNum("${product.startSaleNum}"); //起购量
					item.setPurchaseNum("${product.purchaseNum}");   //限购量
					item.setNumber("${product.number}");   //购物车里对应该商品购买数量
					item.setAmount("${product.amount}");   //购物车里对应该商品购买金额
					item.setName("${product.name}");
        			item.setAssisTitle("${product.assisTitle}");
        			item.setLogoUrl("${product.logoUrl}");
        			item.setOriginalPrice("${product.originalPrice}");
					products.push(item);
					
				</c:forEach>
			}
		});
		
		/**查询分类*/
		function mall_showClassifyProducts(cid){
			document.body.scrollTop=0;
			clientCookie.setChoiceClassifyId(cid);//写入cookie，保存当前二级菜单
			/**切换选中样式*/
			$("#" + choiceClassifyId).removeClass("pc_checked");
			$("#span" + choiceClassifyId).removeClass("pc_span_checked").css("color", "#637970");
			
			$("#" + cid).addClass("pc_checked");
			$("#span" + cid).addClass("pc_span_checked").css("color", "#E0630D");
			choiceClassifyId = cid;
			//缓存一级分类Id
			var pCid = $("#" + cid).parent().parent().attr("id");
			clientCookie.setClassifyId(pCid);
			
			var param = "sid="+clientCookie.getSID(sid)+"&classifyId="+choiceClassifyId+"&shopModel=classify";
			$.ajax({
				type: 'get',
				url: '${ctxShop}/shoping/goodList/productList.shtml',
				data: param,
				dataType: 'json',
				success: function(data){
					products = new Array();
					var tr = "";
					if(data == null || data.length == 0 ){
						tr = "<div class=\"row\" align=\"center\"><div class=\"col-md-11 col-sm-11 col-xs-11\"><div class=\"pc_nodata\">暂无商品</div></div></div>";// style=\"margin-left: 50px;\"
					}else{
						
						$.each(data,function(i,product){
								var url = "${ctxShop}/shoping/goodInfo/productDetail.shtml?id="+product.id+"&mode=${mode}";
								tr += "<div class=\"row\" style=\"padding-top: 10px; padding-bottom: 10px; border-bottom: 2px solid #D5E9BE;\">";
								tr += "<div id=\""+product.id+"\" class=\"media\">";
								tr += "<div class=\"media-left\" onclick=\"showProductDetail('"+url+"');\">";
								tr += "<a href=\"javascript:\">";
		                        tr += "<img id=\"photo"+i +"\" class=\"displayImages media-object body_product_img pc_img\"";
								tr += "src=\"${ctxFront}/images/loading.png\" path=\"${ctxWeb}/shops/download?filePath="+product.logoUrl +"\"";
								tr += "data-holder-rendered=\"true\" />";
		                        tr += " </a>" ;
								tr += "</div>" ;
								tr += "<div class=\"media-body\">" ;
								tr += "<a href=\"javascript: showProductDetail('"+url+"');\"> <strong>"+product.name+"</strong></a>" ;
		                       	tr += " </br>" ;
		                        tr += "<label>" ;
		                        tr += "  "+product.assisTitle +"" ;
		                        tr += " </label>" ;
		                        tr += " </br>" ;
								tr += "<label>" ;// style=\"margin-top: -5px;\"
								tr += "<label class=\"pc_amount\"><strong>￥"+product.price+"</strong></label><label style=\"color: #bbb; font-size: 14px;\">&nbsp;&nbsp;&nbsp;&nbsp;<del>￥"+product.originalPrice+"</del></label>";
								tr += "</label>" ;
								tr += "<div class=\"input-group input-group-sm pc_text\">" ; //style=\"margin-top: -5px;\"
						        tr += "<img onclick=\"mall_diffProductCart('"+product.id+"', 0)\" id=\"imgdiff"+product.id+"\" class=\"pc_left pc_cursor\" status=\"0\" alt=\"\" src=\"${ctxStatic}/modules/bootstrap/img/diff-1.png\" width=\"25\" height=\"25\"/>";
						       	tr += "<label class=\"pc_lable pc_left\"><strong id=\"sl_product"+product.id+"\">0</strong></label>" ;
						        tr += "<img onclick=\"mall_addProductCart('"+product.id+"')\" id=\"imgadd"+product.id+"\" class=\"pc_left pc_cursor\" status=\"1\" alt=\"\" src=\"${ctxStatic}/modules/bootstrap/img/add-2.png\" width=\"25\" height=\"25\"/>" ;
								tr += "</div>" ;
								tr += "</div>";
								tr += "</div>";
								tr += "</div>" ;
								
							/**初始化列表*/
							var item = new Product();
							item.setId(product.id);
							item.setPrice(product.price);
							item.setStartSaleNum(product.startSaleNum); //起购量
							item.setPurchaseNum(product.purchaseNum);   //限购量
							item.setNumber(product.number);   //购物车里对应该商品购买数量
							item.setAmount(product.amount);   //购物车里对应该商品购买金额
							item.setName(product.name);
        					item.setAssisTitle(product.assisTitle);
        					item.setLogoUrl(product.logoUrl);
        					item.setOriginalPrice(product.originalPrice);
							products.push(item);
						});
					}
					
					$("#product_list_data").empty();
					$("#product_list_data").append(tr);
					
					/**初始化购物车列表*/
					initProductCar();
					//预加载图片
					startLoadImage();
				},
				failure: function(data){
					alert(data + '处理失败！');
				}
			});
			
		}
		
		function showProductDetail(url){
			//loading('正在跳转，请稍等...');
			setTimeout(function(){
				//hideLoader();
				document.location=url+"&sid="+sid+"&classifyId="+choiceClassifyId+"&shopModel=classify";				
			},1000);
		}
		
		/**初始化购物车列表*/
		initProductCar();
	</script>
	</head>
	<body>
	<!--导航条-->
	<%@ include file="/WEB-INF/views/modules/include/top.jsp"%>

		<!-- 内容 -->
		<div class="container" style="margin-top: 40px; background-color: #FBFEEB;">
			<%@ include file="/WEB-INF/views/modules/include/left.jsp"%>
			
			<div class="col-md-6" style="left: 25%;">
				<%@ include file="/WEB-INF/views/modules/include/navicat.jsp"%>
				
                <div class="row">
                    <div class="col-md-5 col-sm-5 col-xs-5 text-center pc_left_menu pc_left">
                    	<ul id="accordion" class="accordion">
                    		<c:if test="${fn:length(stores) > 0}">
							<c:forEach items="${stores}" var="store" varStatus="vs">
							<li id="${store.classify.id }" class="parent_menu">
								<div class="link">
									<i class="fa">
										<c:if test="${(vs.index+1)==1}">
										<img src="${ctxStatic }/modules/bootstrap/img/caichang.png" width="20" height="20" style="margin-top: -5px;" />
										</c:if>
										<c:if test="${(vs.index+1)==2}">
										<img src="${ctxStatic }/modules/bootstrap/img/chaoshi.png" width="20" height="20" style="margin-top: -5px;" />
										</c:if>
										<c:if test="${(vs.index+1)==3}">
										<img src="${ctxStatic }/modules/bootstrap/img/huadian.png" width="20" height="20" style="margin-top: -5px;" />
										</c:if>
									</i>
									${store.classify.name }
									<i class="fa fa-chevron-down"></i>
								</div>
								<ul class="submenu">
									<c:forEach items="${store.classify.childList}" var="classify">
									<li id="${classify.id}" class="${choiceClassifyId== classify.id?'pc_checked':''}">
										<a id="span${classify.id}" href="javascript:;" class="${choiceClassifyId== classify.id?'pc_span_checked':''}" onclick="mall_showClassifyProducts('${classify.id}');" style="padding: 10px 0px 10px 0px;">${classify.name }</a>
									</li>
									</c:forEach>
								</ul>
							</li>
							</c:forEach>
							</c:if>
							<c:if test="${fn:length(stores) == 0}">
								<li>
									<a href="#">暂无商店</a>
								</li>
							</c:if>
						</ul>
                    
						<!-- <ul class="nav nav-pills nav-stacked nav-pills-stacked-example pc_left_menu" style="display: none;">
							<c:if test="${fn:length(stores) > 0}">
								<c:forEach items="${stores}" var="store">
									<li id="${store.id}" class="">
										<span id="span${store.id}" class="" onclick="" style="position: relative; display: block; padding: 10px 15px; cursor: pointer;"><strong>${store.classify.name }</strong></span>
									</li>
									<c:forEach items="${store.classify.childList}" var="classify">
										<li id="${classify.id}" class="${choiceClassifyId== classify.id?'pc_checked':''}">
											<span id="span${classify.id}" class="${choiceClassifyId== classify.id?'pc_span_checked':''}" onclick="mall_showClassifyProducts('${classify.id}');" style="position: relative; display: block; padding: 10px 15px; cursor: pointer;"><strong>${classify.name }</strong></span>
										</li>
									</c:forEach>
								</c:forEach>
							</c:if>
							<c:if test="${fn:length(stores) == 0}">
								<li>
									<a href="#">暂无商店</a>
								</li>
							</c:if>
						</ul> -->
					</div>
					
					<div id="product_list_data" class="col-md-7 col-sm-7 col-xs-7" style="padding-left: 0px; padding-bottom: 52px; width: 68%; float: right;">
	                </div>
                </div>
			</div>
			<%@ include file="/WEB-INF/views/modules/include/right.jsp"%>

		</div>
		
		
		<!-- 底部
		<hr style="visibility: hidden;"> -->
		
		<nav class="container navbar navbar-default navbar-fixed-bottom pc_bottom_width" style="width: 50%;">
		<div class="container-fluid text-center">
               <div class="row">
                   <div class="col-md-3 pc_color">
                      	总金额：<span class="pc_amount">￥<small id="sl">0.00</small></span>
                   </div>
                   <div class="col-md-6 pc_color" id="totalAmountDesc" style="display: none;">
                       
                   </div>
                   <div class="col-md-2 pc_right">
                   		<a href="${ctxShop}/shoping/shopCart?sid=${sid}&classifyId=${classifyId}">
			            	<div class="pc_b">
			            		<img alt="去结算" src="${ctxStatic}/modules/bootstrap/img/gwc_0.png" width="50" height="45">
			            	</div>
			                <div class="pc_badger_css">
			                	<div  class="pc_badger_badge" style="border-radius:50%;background-color: red;" id="car_num">0</div>
			                </div>
			            </a>
                   </div>
               </div>
           </div>
		</nav>
		<script src="${ctxStatic}/modules/accordion-menu/js/index.js"></script>
		<script type="text/javascript">
			function initMenuLayout(){
				//计算pc_left_menu部分的高度
				var topH = $(".navbar-fixed-top").height();
				var bottomH = $(".navbar-fixed-bottom").height();
				//var pcNavbarH= $(".pc_navbar-fixed-position").height();
				var pcNavbarH= 0;
				var winH = $(window).height();
				var classifyMenuH = winH-topH-bottomH-pcNavbarH-47;
				$(".pc_left_menu").height(classifyMenuH);
				
				//加载选中一级分类，展开二级分类
				var cookieService = new  MallCookieService();
				var classifyId=cookieService.getClassifyId();
				if(classifyId==null || classifyId==""){
					cookieService.setClassifyId($(".parent_menu:eq(0)").attr("id"));
				}
				$(".parent_menu").each(function(){
					if($(this).attr("id")==classifyId){
						$(this).addClass("open");
						$(this).find(".submenu").css("display", "block");
					}
				});
			}
			initMenuLayout();
		</script>
	</body>
</html>
